<template>
  <div>
<!--  <h2>数据统计</h2>  -->

    <el-row :gutter="20">
      <!-- 题目错误率统计图 -->
      <el-col :span="12">
        <el-card>
          <h3>题目错误率统计</h3>
          <v-chart :option="errorRateChartOptions" style="width: 100%; height: 400px;" />
        </el-card>
      </el-col>

      <!-- 学生练习数据图 -->
      <el-col :span="12">
        <el-card>
          <h3>学生练习数据</h3>
          <v-chart :option="studentPracticeChartOptions" style="width: 100%; height: 400px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
use([TitleComponent, TooltipComponent, GridComponent, BarChart, DatasetComponent, CanvasRenderer]);

export default defineComponent({
  components: {
    VChart,
  },
  data() {
    return {
      errorRateData: [
        { question_type: '单选题', total_attempts: 100, incorrect_attempts: 20 },
        { question_type: '多选题', total_attempts: 80, incorrect_attempts: 30 },
        { question_type: '填空题', total_attempts: 60, incorrect_attempts: 10 },
        { question_type: '简答题', total_attempts: 40, incorrect_attempts: 5 },
      ],
      studentPracticeData: [
        { student_name: '张三', total_exercises: 50, correct_answers: 40 },
        { student_name: '李四', total_exercises: 45, correct_answers: 35 },
        { student_name: '王五', total_exercises: 60, correct_answers: 50 },
      ],
    };
  },
  computed: {
    errorRateChartOptions() {
      const questionTypes = this.errorRateData.map(item => item.question_type);
      const errorRates = this.errorRateData.map(item =>
          ((item.incorrect_attempts / item.total_attempts) * 100).toFixed(2)
      );

      return {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          type: 'category',
          data: questionTypes,
        },
        yAxis: {
          type: 'value',
          name: '错误率 (%)',
        },
        series: [{
          name: '错误率',
          type: 'bar',
          data: errorRates,
          itemStyle: {
            color: '#ff4d4f', // 错误率柱状图颜色
          },
        }],
      };
    },
    studentPracticeChartOptions() {
      const studentNames = this.studentPracticeData.map(item => item.student_name);
      const accuracyRates = this.studentPracticeData.map(item =>
          ((item.correct_answers / item.total_exercises) * 100).toFixed(2)
      );

      return {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          type: 'category',
          data: studentNames,
        },
        yAxis: {
          type: 'value',
          name: '准确率 (%)',
        },
        series: [{
          name: '准确率',
          type: 'bar',
          data: accuracyRates,
          itemStyle: {
            color: '#36cfc9', // 学生练习数据柱状图颜色
          },
        }],
      };
    },
  },

});
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
.el-card {
  margin-bottom: 20px;
}
</style>
